<template>
  <div>
    <h3>Todo功能</h3>
    <hr />
    <div>
      <input v-model="thing" placeholder="请输入内容" @blur="addOne(thing)" class="todo-input" />
    </div>
    <todoList 
      :list="todos"
      @delone="delTodo"
    >
    </todoList>
  </div>
</template>

<script>
import todoList from './todoList.vue'
export default {
  components:{
    todoList
  },
  methods:{
    delTodo(index){
      // 删除第几项
      this.todos.splice(index, 1)
    },
    addOne(thing){
      let obj = {
        name: thing,
        check: false
      }
      this.todos.push(obj)
    }
  },
  data(){
    return {
      thing: '填写内容',
      todos: [
        {
          name: '学习',
          check: false
        },
        {
          name: '听音乐',
          check: false
        },{
          name: '跑步',
          check: false
        }
      ]
    }
  }

}
</script>

<style>
  .todo-input{
    width: 300px;
    height: 40px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
</style>